/* ==================
         进度条
 ==================== */

.cu-progress {
    overflow: hidden;
    height: 28*1upx;
    background-color: #ebeef5;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.cu-progress + view,
.cu-progress + text {
    line-height: 1;
}

.cu-progress.xs {
    height: 10*1upx;
}

.cu-progress.sm {
    height: 20*1upx;
}

.cu-progress view {
    width: 0;
    height: 100%;
    align-items: center;
    display: flex;
    justify-items: flex-end;
    justify-content: space-around;
    font-size: 20*1upx;
    color: #ffffff;
    transition: width 0.6s ease;
}

.cu-progress text {
    align-items: center;
    display: flex;
    font-size: 20*1upx;
    color: #333333;
    text-indent: 10*1upx;
}

.cu-progress.text-progress {
    padding-right: 60*1upx;
}

.cu-progress.striped view {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 72*1upx 72*1upx;
}

.cu-progress.active view {
    animation: progress-stripes 2s linear infinite;
}


//扩展
.cu-progress {
    &.vertical {
        height: 100%;
        width: 28*1upx;
        align-items: start;
        padding-right: 0;
        padding-left: 0;
        flex-direction: column;

        &.align-start {
            flex-direction: column;
        }

        &.align-end {
            flex-direction: column-reverse;
        }

        &.align-center {
            align-items: center;
        }

        &.xs {
            width: 10*1upx;
        }

        &.sm {
            width: 20*1upx;
        }

        view {
            transition: height 0.6s ease;
            height: 0;
            width: 100%;
        }

        &.text-progress {
            padding: 0 0 60*1upx 0;
        }

        $bg-orange-striped: rgba(255, 255, 255, 0.3);

        view.bg-yellow {
            background-image: linear-gradient(45deg, $bg-orange-striped 25%, transparent 25%, transparent 50%, $bg-orange-striped 50%, $bg-orange-striped 75%, transparent 75%, transparent);
        }
    }
}
